<template>
	<div id="app">
		<!-- 病例个人信息展示 -->
		<el-card shadow="always">
			<div style="width: 300px; float: right;">
				<el-input v-model="input" placeholder="请输入挂号单号" style="width:200px; inline-block;"></el-input>
				<el-button type="primary" icon="el-icon-search" style="display: inline-block;" @click="handleSearch">搜索
				</el-button>
			</div>
			<el-descriptions title="病例信息">
				<el-descriptions-item label="挂号单号">{{form.guaId}}</el-descriptions-item>
				<el-descriptions-item label="姓名">{{form.patientName}}</el-descriptions-item>
				<el-descriptions-item label="年龄">{{form.patientAge}}</el-descriptions-item>
				<el-descriptions-item label="性别">{{form.patientGender}}</el-descriptions-item>
				<el-descriptions-item label="科室">{{form.depName}}</el-descriptions-item>
				<el-descriptions-item label="就诊医生">{{form.doctorName}}</el-descriptions-item>
				<el-descriptions-item label="联系电话">{{form.patientTel}}</el-descriptions-item>
				<el-descriptions-item label="身份证号">{{form.patientIdCard}}</el-descriptions-item>
				<el-descriptions-item label="备注">
					<el-tag size="small">
						<el-button type="text" size="mini" v-on:click="review">检查结果</el-button>
					</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="症状">{{form.symptom}}</el-descriptions-item>
				<el-descriptions-item label="诊断结果">{{form.diaResult}}</el-descriptions-item>
				<el-descriptions-item label="操作">
					<el-tag size="small">
						<el-button type="text" size="mini" v-on:click="how">药品划价</el-button>
					</el-tag>
				</el-descriptions-item>
			</el-descriptions>

		</el-card>

		<!-- 查询药品信息展示 -->
		<el-card shadow="always" v-bind:style="styleMedicine1">
			<div>
				<span style="float: left;font-weight: bold;">药品信息</span>
				<el-table height="800"
					:data="tableData.filter(data => !search || data.productName.toLowerCase().includes(search.toLowerCase()))"
					style="width: 100%">
					<el-table-column label="序号" prop="id" width="100px"></el-table-column>
					<el-table-column label="批准文号" prop="productPzwh" width="200px"></el-table-column>
					<el-table-column label="药品名" prop="productName"></el-table-column>
					<el-table-column label="规格" prop="productFormat"></el-table-column>
					<el-table-column label="生产企业" prop="productManufacturer"></el-table-column>
					<el-table-column label="二维码编号" prop="productBarcode"></el-table-column>
					<el-table-column label="数量(盒/袋)" width="200px">
						<template slot-scope="scope">
							<el-input-number size="mini" :min="1" v-model="scope.row.num4"
								@change="changeNum(scope.row,scope.$index)"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column label="单价" prop="productRetailPrice"></el-table-column>
					<el-table-column align="center">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search" size="mini" placeholder="输入药品名" />
						</template>
						<template slot-scope="scope">
							<el-button type="success" icon="el-icon-check" circle size="small"
								@click="handleAdd(scope.$index, scope.row)"></el-button>

						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- （1） 分页组件，数据绑定到pageData对象 -->
			<!-- （4）监听当前页码改变事件 -->
			<el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.size"
				:current-page="pageData.current" @current-change="handleChange">
			</el-pagination>
		</el-card>

		<!-- 划价的处方单 -->
		<el-card shadow="always" v-bind:style="styleMedicine2">
			<span style="float: left;font-weight: bold;">处方单</span>
			<el-table :data="tableMedicine" style="width: 100%" max-height="250">
				<!-- <el-table-column property="id" label="序号" width="120"></el-table-column> -->
				<el-table-column property="productName" label="药品名" width="250"></el-table-column>
				<el-table-column property="productRetailPrice" label="单价/元" width="250"></el-table-column>
				<el-table-column property="num4" label="数量(盒/袋)" width="250"></el-table-column>
				<el-table-column property="count" label="小计/元" width="200"></el-table-column>

				<el-table-column label="操作" width="250">
					<template slot-scope="scope">
						<el-button @click.native.prevent="deleteRow(scope.$index, tableMedicine)" type="text"
							size="small" icon="el-icon-delete">移除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-tag size="medium" style="margin-left: 500px;">总计：{{this.total}}元</el-tag>
			<el-button type="primary" size="mini" @click="handleAccount">提交<i class="el-icon-upload el-icon--right"></i>
			</el-button>
		</el-card>


		<el-card shadow="always" v-bind:style="bloodReview">
			<el-descriptions title="血常规" size="mini">
				<el-descriptions-item label="单号">{{blood.bloodId}}</el-descriptions-item>
				<el-descriptions-item label="红细胞压积">{{blood.redCellVolumn}}</el-descriptions-item>
				<el-descriptions-item label="红细胞平均体积">{{blood.redCellAvgVolumn}}</el-descriptions-item>
				<el-descriptions-item label="红细胞体积宽度">{{blood.redCellWidth}}</el-descriptions-item>
				<el-descriptions-item label="淋巴细胞计数">{{blood.lympCellNum}}</el-descriptions-item>
				<el-descriptions-item label="中间细胞计数">{{blood.midCellNum}}</el-descriptions-item>
				<el-descriptions-item label="血小板平均体积">{{blood.bloodPlateletVolumn}}</el-descriptions-item>
				<el-descriptions-item label="血小板体积分布宽度">{{blood.bloodPlateletWidth}}</el-descriptions-item>
				<el-descriptions-item label="红细胞平均血红蛋白含量">{{blood.hemoglobinNum}}</el-descriptions-item>
				<el-descriptions-item label="红细胞平均血红蛋白浓度">{{blood.hemoglobinConcentration}}</el-descriptions-item>
				<el-descriptions-item label="新增时间">{{blood.rwaAddTime}}</el-descriptions-item>
			</el-descriptions>
		</el-card>

		<el-card shadow="always" v-bind:style="peeReview">
			<el-descriptions title="尿常规" size="mini">
				<el-descriptions-item label="单号">{{pee.pissId}}</el-descriptions-item>
				<el-descriptions-item label="白细胞">{{pee.whiteCell}}</el-descriptions-item>
				<el-descriptions-item label="尿胆原">{{pee.urobilinogen}}</el-descriptions-item>
				<el-descriptions-item label="微量白蛋白">{{pee.microalbumin}}</el-descriptions-item>
				<el-descriptions-item label="蛋白质">{{pee.protein}}</el-descriptions-item>
				<el-descriptions-item label="胆红素">{{pee.bilirubin}}</el-descriptions-item>
				<el-descriptions-item label="葡萄糖">{{pee.glucose}}</el-descriptions-item>
				<el-descriptions-item label="抗坏血酸">{{pee.ascorbicAcid}}</el-descriptions-item>
				<el-descriptions-item label="pH值">{{pee.pHValue}}</el-descriptions-item>
				<el-descriptions-item label="亚硝酸盐">{{pee.nitrite}}</el-descriptions-item>
				<el-descriptions-item label="新增时间">{{pee.checkAddTime}}</el-descriptions-item>
			</el-descriptions>
		</el-card>

		<el-card shadow="always" v-bind:style="imageReview">
			<el-descriptions title="影像检测" size="mini">
				<el-descriptions-item label="单号">{{image.imageId}}</el-descriptions-item>
				<el-descriptions-item label="检查类型">{{image.imageName}}</el-descriptions-item>
				<el-descriptions-item label="结论">{{image.imageResult}}</el-descriptions-item>
				<el-descriptions-item label="新增时间">{{image.imageAddTime}}</el-descriptions-item>
			</el-descriptions>
		</el-card>

		<!-- <el-card shadow="always" v-bind:style="">
			<el-col :sm="12" :lg="6">
			    <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
			      <template slot="extra">
			        <el-button type="primary" size="medium" >返回</el-button>
			      </template>
			    </el-result>
			  </el-col>
		</el-card> -->

	</div>
</template>

<script>
	export default {
		name: 'GetMedicine',
		data() {
			return {
				form: {
					guaId: '',
					patientName: '',
					patientAge: '',
					patientGender: '',
					depName: '',
					doctorName: '',
					patientTel: '',
					patientIdCard: '',
					symptom: '',
					diaResult: '',

				},
				blood: {
					bloodId: '',
					redCellVolumn: '',
					redCellAvgVolumn: '',
					redCellWidth: '',
					lympCellNum: '',
					midCellNum: '',
					bloodPlateletVolumn: '',
					bloodPlateletWidth: '',
					hemoglobinNum: '',
					hemoglobinConcentration: '',
					rwaAddTime: ''
				},
				pee: {
					pissId: '',
					whiteCell: '',
					urobilinogen: '',
					microalbumin: '',
					protein: '',
					bilirubin: '',
					glucose: '',
					ascorbicAcid: '',
					pHValue: '',
					nitrite: '',
					checkAddTime: ''
				},
				image: {
					imageId: '',
					imageName: '',
					imageResult: '',
					imageAddTime: ''
				},
				styleMedicine1: {
					display: 'none'
				},
				styleMedicine2: {
					display: 'none'
				},

				bloodReview: {
					display: 'none'
				},
				peeReview: {
					display: 'none'
				},
				imageReview: {
					display: 'none'
				},
				total: 0.00,
				input: '',
				totalMedicine: 0,
				dialogTableVisible: false,
				tableMedicine: [],
				tableData: [],
				// 2. 存储分页数据
				pageData: {
					total: 1,
					size: 10,
					current: 1
				},
				search: '',

			}
		},
		methods: {
			handleAccount() {
				console.log(this.tableMedicine);
				if (this.tableMedicine.length > 0) {
					this.$http.post("http://localhost:8088/accountMedicine", {
							tableMedicine: this.tableMedicine,
							totalMedicine: this.totalMedicine,
							guaId: this.form.guaId,
							doctorId: localStorage.getItem("doctorId")
						})
						.then(response => {
							console.log(response);
							if (response.data.data != 0) {
								this.$notify({
									title: '成功',
									message: '项目划价成功啦',
									type: 'success'
								});
								//成功后关闭界面
								this.tableMedicine = this.$options.data().tableMedicine;
								this.form = this.$options.data().form;

								this.styleMedicine1.display = 'none';
								this.styleMedicine2.display = 'none'
							}
						})
						.catch(error => {
							console.log(error);
						})

				} else {
					this.$message('请先选择药品');
				}
			},
			handleSearch() {
				this.styleMedicine1.display = 'none';
				this.styleMedicine2.display = 'none'
				this.bloodReview.display = 'none';
				this.peeReview.display = 'none';
				this.imageReview.display = 'none';
				this.tableMedicine = this.$options.data().tableMedicine;
				this.$http.get("http://localhost:8088/searchPatientByProject", {
						params: {
							input: this.input
						}
					})

					.then(response => {
						console.log(response);
						this.input = null;
						if (response.data.data != null) {
							this.form = response.data.data;
						} else {
							this.$message({
								message: '警告哦，不存在该病例信息，请你再想想',
								type: 'warning'
							});
							this.form = this.$options.data().form
						}
					})
					.catch(error => {
						console.log(error);
					})
			},
			show() {
				console.log(this.$route);
				if (this.$route.params.guaId != null) {
					this.input = this.$route.params.guaId;
					this.handleSearch();
				}
			},
			review() {
				this.$http.get("http://localhost:8088/queryCheckResult", {
						params: {
							guaId: this.form.guaId
						}
					})
					.then(response => {
						this.styleMedicine1.display = 'none';
						this.styleMedicine2.display = 'none';
						console.log(response);
						if (response.data.data[0] != null) {
							this.blood = response.data.data[0];
							this.bloodReview.display = '';
						}
						if (response.data.data[1] != null) {
							this.pee = response.data.data[1];
							this.peeReview.display = '';
						}
						if (response.data.data[2] != null) {
							this.image = response.data.data[2];
							this.imageReview.display = '';
						}
						if (response.data.data[0] == null && response.data.data[1] == null && response.data.data[2] ==
							null) {
							// alert("meiyou");
							this.$message({
								showClose: true,
								message: '当前该病例没有检查信息哦，请你再想想'
							});
						}
					})
					.catch(error => {
						console.log(error);
					})
			},
			how() {
				if (this.form.guaId != '') {
					this.$confirm('是否划价', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '开始划价!'
						});
						this.bloodReview.display = 'none';
						this.peeReview.display = 'none';
						this.imageReview.display = 'none';
						this.styleMedicine1.display = '';
						this.styleMedicine2.display = '';
						//从数据库获取药品信息
						this.find();

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '取消划价'
						});
					});
				} else {
					this.$message({
						message: '警告哦，请先获取病历信息',
						type: 'warning'
					});
				}
			},
			deleteRow(index, rows) {
				console.log(index);
				rows.splice(index, 1);
				console.log(this.tableMedicine)
			},
			handleAdd(index, row) {
				console.log(index, row);
				this.tableMedicine.forEach(function (item, index) {
					if (item.productName == row.productName) {
						alert("已存在");
						this.$message({
							message: '警告哦，这是一条警告消息',
							type: 'warning'
						});
					}
				});
				this.tableMedicine.push(row);
				console.log(row.num4)
				console.log(row.productRetailPrice)
				console.log(row.productName)
				// let num=0;
				// num
				// this.tableMedicine[this.tableMedicine.length-1].num4=num;
				this.tableMedicine[this.tableMedicine.length - 1].count = row.num4 * row.productRetailPrice;
				console.log(this.tableMedicine)
				this.getTotal();

			},
			changeNum(row, index) {

				this.tableMedicine.forEach(function (item, index) {
					let a = 0.0;
					if (item.productName == row.productName) {

						item.num4 = row.num4;
						// a=item.num4*row.productRetailPrice;
						// let b=a.toFixed(2);
						// item.count=b;
						item.count = item.num4 * row.productRetailPrice;
						//console.log(this.tableMedicine)
						//this.tableMedicine[index].count=item.count;
					}

				});
				console.log(this.tableMedicine)
				this.getTotal();
			},
			find() {
				console.log(this.tableData)
				this.$http.get("http://localhost:8088/getAllMedicine", {
						params: {
							current: this.pageData.current
						}
					}) //携带当前叶面数据
					.then(response => {
						console.log(response);
						if (response.data.data != null) {
							//3.查询，返回分页相关数据，赋值给pageData
							Object.assign(this.pageData, response.data.data);
							this.tableData = response.data.data.records;
							// this.tableData.forEach(item=>{
							// 	item.num4=1;
							// })
						}
					})
					.catch(error => {
						console.log(error)
					})
			},
			handleChange(data) {
				//修改当前页面并发起新的查询
				console.log(data);
				this.pageData.current = data;
				this.find();
			},
			getTotal() {
				let amount = 0.0;
				for (let i = 0; i < this.tableMedicine.length; i++) {
					amount += this.tableMedicine[i].count;
				}
				this.totalMedicine = amount;
				let a = amount.toFixed(2);
				this.total = a;
			}
		},
		// watch:{
		// 	tableMedicine:[],
		// },
		// computed:{
		// 	total(){
		// 		let amount=0.0;
		// 		for(let i=0;i<this.tableMedicine.length;i++){
		// 			amount+=this.tableMedicine[i].count;
		// 		}
		// 		this.totalMedicine=amount;
		// 		let a=amount.toFixed(2);
		// 		console.log("======")
		// 		console.log(amount)
		// 		console.log("=======")
		// 		return a;
		// 	}
		// },
		mounted() {
			this.show();
		}
	}
</script>

<style>
</style>